<template>
    <div class='content'>

        <section>
            <div class="profile_page">
                    <head-top  :go-back='goBack'  :head-title="profiletitle"></head-top>
            </div>
        </section>
      <!--公司财务指标-->
      <div>
        <titlebar :titleLeft='titleLeft'></titlebar>
        <div class="newsItem">
          <div class="itemContent">
            <div class="itemLists">
              <div class="itemList">
                <span class="itemName">主营业务收入(完成{{Math.round(financialData.sjMainBusinessEarning/financialData.mbMainBusinessEarning*100)}}%)</span>
                <span class="itemType"><font class="chartData-pink">{{financialData.mbMainBusinessEarning}}</font>万  (目标)</span>
              </div>
              <div class="itemList">
                <span class="itemName"></span>
                <span class="itemType"><font class="chartData-pink">{{financialData.sjMainBusinessEarning}}</font>万  (实际)</span>
              </div>
              <div class="itemList">
                <span class="itemName">利润总额(完成 {{Math.round(financialData.sjTotalProfits/financialData.mbTotalProfits*100)}}%)</span>
                <span class="itemType"><font class="chartData-zi1">{{financialData.mbTotalProfits}}</font>万  (目标)</span>
              </div>
              <div class="itemList">
                <span class="itemName"></span>
                <span class="itemType"><font class="chartData-pink">{{financialData.sjTotalProfits}}</font>万  (实际)</span>
              </div>
              <div class="itemList">
                <span class="itemName">管理费用</span>
                <span class="itemType"><font class="chartData-zi">{{financialData.administrativeExpenses}}</font>万</span>
              </div>
              <div class="itemList">
                <span class="itemName">财务费用</span>
                <span class="itemType"><font class="chartData-pink">{{financialData.financialExpenses}}</font>万</span>
              </div>
            </div>
          </div>
        </div>
        <div class="newsItem">
          <div class="itemContent">
            <div class="itemLists">
              <div class="itemList">
                <span class="itemName">销售费用</span>
                <span class="itemType"><font style="color: #56CB7F">{{financialData.sellingExpenses}}</font>万</span>
              </div>
              <div class="itemList">
                <span class="itemName">主营业务成本</span>
                <span class="itemType"><font style="color: #37A2DA">{{financialData.mainBusinessCost}}</font>万 </span>
              </div>
              <div class="itemList">
                <span class="itemName">应收账款</span>
                <span class="itemType"><font style="color: #3BDDB6">{{financialData.receivables}}</font>万 </span>
              </div>
              <div class="itemList">
                <span class="itemName">存货</span>
                <span class="itemType"><font style="color: #5322D0">{{financialData.stocktaking}}</font>万 </span>
              </div>
              <div class="itemList">
                <span class="itemName">毛利率</span>
                <span class="itemType"><font style="color: #DB6565">{{financialData.grossProfitRate}}</font>%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <!--公司人工成本-->
        <titlebar :titleLeft='titleLeft1'></titlebar>
        <div class="newsItem">
          <div class="itemContent">
            <div class="itemLists">
              <div class="itemList">
                <span class="itemName">共计</span>
                <span class="itemType"><font style="color: #D03131">{{allDeptCost}}</font>万</span>
              </div>
            </div>
            <div id="echarts3" style="width:100%;height:200px;"></div>
          </div>
        </div>
      </div>
      <div>
        <!--工资总额统计-->
        <titlebar :titleLeft='titleLeft2'></titlebar>
        <div class="newsItem">
          <div class="itemContent">
            <div class="itemLists">
              <div class="itemList">
                <span class="itemName">共计</span>
                <span class="itemType"><font style="color: #D03131">{{allDeptWageToTal}}</font>万</span>
              </div>
            </div>
            <div id="echarts4" style="width:100%;height:200px;"></div>
          </div>
        </div>
      </div>
      <div>
        <!--公司员工情况分析-->
        <titlebar :titleLeft='titleLeft3'></titlebar>
        <!--年龄-->
        <div class="newsItem">
          <div class="itemContent">
            <div class="itemLists">
              <div class="itemList">
                <span class="itemName" style="font-size: 0.7rem">年龄</span>
              </div>
            </div>
            <div id="echarts5" style="width:100%;height:200px;"></div>
          </div>
        </div>
        <!--工龄-->
        <div class="newsItem">
          <div class="itemContent">
            <div class="itemLists">
              <div class="itemList">
                <span class="itemName" style="font-size: 0.7rem">工龄</span>
              </div>
            </div>
            <div id="echarts6" style="width:100%;height:200px;"></div>
          </div>
        </div>
        <!--司龄-->
        <div class="newsItem">
          <div class="itemContent">
            <div class="itemLists">
              <div class="itemList">
                <span class="itemName" style="font-size: 0.7rem">司龄</span>
              </div>
            </div>
            <div id="echarts7" style="width:100%;height:200px;"></div>
          </div>
        </div>
        <!--学历-->
        <div class="newsItem">
          <div class="itemContent">
            <div class="itemLists">
              <div class="itemList">
                <span class="itemName" style="font-size: 0.7rem">学历</span>
              </div>
            </div>
            <div id="echarts8" style="width:100%;height:200px;"></div>
          </div>
        </div>
        <!--员工类别-->
        <div class="newsItem">
          <div class="itemContent">
            <div class="itemLists">
              <div class="itemList">
                <span class="itemName" style="font-size: 0.7rem">员工类别</span>
              </div>
            </div>
            <div id="echarts9" style="width:100%;height:200px;"></div>
          </div>
        </div>
        <!--政治面貌-->
        <div class="newsItem">
          <div class="itemContent">
            <div class="itemLists">
              <div class="itemList">
                <span class="itemName" style="font-size: 0.7rem">政治面貌</span>
              </div>
            </div>
            <div id="echarts10" style="width:100%;height:200px;"></div>
          </div>
        </div>
        <!--职务层级统计-->
        <div class="newsItem">
          <div class="itemContent">
            <div class="itemLists">
              <div class="itemList">
                <span class="itemName" style="font-size: 0.7rem">职务层级统计</span>
              </div>
            </div>
            <div id="echarts12" style="width:100%;height:200px;"></div>
          </div>
        </div>
        <!--职称-->
        <div class="newsItem">
          <div class="itemContent">
            <div class="itemLists">
              <div class="itemList">
                <span class="itemName" style="font-size: 0.7rem">职称</span>
              </div>
            </div>
            <div id="echarts11" style="width:100%;height:200px;"></div>
          </div>
        </div>
      </div>
      <div>
        <!--公司员工情况分析-->
        <titlebar :titleLeft='titleLeft4'></titlebar>
        <div class="newsItem">
          <div class="itemContent">
            <div class="itemLists">
              <div class="itemList">
                <span class="itemName" style="font-size: 0.7rem"></span>
              </div>
            </div>
            <div id="echarts13" style="width:100%;height:200px;"></div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>

//    var echarts = require('echarts');
    import headTop from '@/components/header/head';
    import titlebar from '@/components/titlebar3/titlebar3';
    import {getFinancial,getAllDeptYearCost,getAllDeptMonthWageTotal,getPersonAge,getWorkAgeAge,getCompanyAgeAge,getPersonEducation,getPersonType,getpersonParty,getPersonTechnical,getPersonJobLevel,getQueryPerson} from '@/service/getData';
    import {getStore} from '@/assets/config/mUtils';
    import { Dialog,Toast } from 'vant';
    import md5 from 'js-md5';
    var reqData = {};
    reqData.type = 'leader';
    reqData.app_userId = getStore('user_id');
    reqData.CHECK_TIME = new Date().getTime().toString();
    reqData.CHECK_SIGN = md5(reqData.app_userId + reqData.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
    export default {
    	data(){
            return{
                profiletitle:'总经理自助',
                titleLeft:'公司财务指标',
                titleLeft1:'公司人工成本',
                titleLeft2:'工资总额统计',
                titleLeft3:'公司员工情况分析',
                titleLeft4:'公司员工入职、离职情况',
                goBack:true,
                CHECK_TIME: new Date().getTime().toString(),
                app_userId:'',
                allDeptCost:0,
                allDeptWageToTal:0,
                financialData:{
                  mbMainBusinessEarning:0,
                  sjMainBusinessEarning:0,
                  mbTotalProfits:0,
                  sjTotalProfits:0,
                  administrativeExpenses:0,
                  financialExpenses:0,
                  sellingExpenses:0,
                  mainBusinessCost:0,
                  receivables:0,
                  stocktaking:0,
                  grossProfitRate:0,
                }
            }
        },
        created(){
    	    this.app_userId = getStore('user_id');
        },
        mounted(){
          this.getAllDeptMonthCost();
          this.getgetFinancialData();
          this.getAllDeptMonthWageTotal();
          this.getPersonAgeData();
          this.getWorkAgeData();
          this.getCompanyAgeData();
          this.getPersonEducationData();
          this.getPersonTypeData();
          this.getpersonPartyData();
          this.getPersonTechnicalData();
          this.getPersonJobLevelData();
          this.getQueryPersonData();
        },
        props: ['imgSrc', 'menuTitle'],
        components:{
            headTop,
            titlebar
        },
	    beforeRouteLeave (to, from, next) {
		    if (to.path === '/penetList') {
			    from.meta.keepAlive = true
		    } else {
			    from.meta.keepAlive = false
			    // this.$destroy()
		    }
		    next()
	    },
        methods:{
          getgetFinancialData(){
            var data = {};
            data.app_userId = getStore('user_id');
            data.type = 'leader';
            data.CHECK_TIME = new Date().getTime().toString();
            data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
            getFinancial(reqData).then(res=>{
              console.log(res);
              this.financialData = res.data;
            })
          },
          getAllDeptMonthCost(){
            var data = {};
            data.app_userId = getStore('user_id');
            data.CHECK_TIME = new Date().getTime().toString();
            data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
            getAllDeptYearCost(data).then(res=>{
              this.chart3(res.data.allDeptCost);
              this.allDeptCost = res.data.allDeptCost;
            })
          },
          //获取所有部门工资总额
          getAllDeptMonthWageTotal() {
            var data = {};
            data.app_userId = getStore('user_id');
            data.CHECK_TIME = new Date().getTime().toString();
            data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
            getAllDeptMonthWageTotal(data).then(res=>{
              this.chart4(res.data.allDeptWageToTal);
              this.allDeptWageToTal = res.data.allDeptWageToTal;
            })
          },
          //获取年龄
          getPersonAgeData(){
            getPersonAge(this.app_userId,reqData).then(res=>{
              console.log(res);
              this.chart5(res.data);
            })
          },
          getWorkAgeData(){
            getWorkAgeAge(this.app_userId,reqData).then(res=>{
              console.log(res);
              this.chart6(res.data);
            })
          },
          getCompanyAgeData(){
            getCompanyAgeAge(this.app_userId,reqData).then(res=>{
              console.log(res);
              this.chart7(res.data);
            })
          },
          getPersonEducationData(){
            getPersonEducation(this.app_userId,reqData).then(res=>{
              console.log(res);
              this.chart8(res.data);
            })
          },
          getPersonTypeData(){
            getPersonType(this.app_userId,reqData).then(res=>{
              console.log(res);
              this.chart9(res.data);
            })
          },
          getpersonPartyData(){
            getpersonParty(this.app_userId,reqData).then(res=>{
              console.log(res);
              this.chart10(res.data);
            })
          },
          getPersonTechnicalData(){
            getPersonTechnical(this.app_userId,reqData).then(res=>{
              console.log(res);
              this.chart11(res.data);
            })
          },
          getPersonJobLevelData(){
            getPersonJobLevel(this.app_userId,reqData).then(res=>{
              console.log(res);
              this.chart12(res.data);
            })
          },
          getQueryPersonData(){
            getQueryPerson(this.app_userId,reqData).then(res=>{
              console.log(res);
              this.chart13(res.data.entryList,res.data.leavesList,res.data.months);
            })
          },
          /*点击穿透*/
          showDetails(url,type,deptId,name,month,isEntry){
            if(!month){
              month = "无";
              isEntry = "无";
            };
            this.$router.push(
              { name: 'penetList', params: { url: url ,type:type,deptId:deptId,name:name,month:month,isEntry:isEntry}}
            );
          },
          chart3(data){
            var dom = document.getElementById("echarts3");
            var myChart = echarts.init(dom);
            var option = {
              series: [{
                type: 'liquidFill',
                radius: 130,
                center: ['50%', '45%'],
                data: [0.7, 0.75],
                backgroundStyle: {
                  borderWidth: 4,
                  borderColor: '#f0f0f0',
                  color: '#fff'
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 1,
                  color: 'rgba(81, 93, 195, 0.7)'
                }, {
                  offset: 0,
                  color: 'rgba(113, 124, 221, 0.3)'
                }]),
                itemStyle: {
                  shadowBlur: 0,
	                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
		                offset: 1,
		                color: 'rgba(172, 220, 238, 0.7)'
	                }, {
		                offset: 0,
		                color: 'rgba(172, 220, 238, 0.7)'
	                }]),
                  opacity: 1,
                },
                outline: {
                  show: false
                },
                label: {
                  fontSize: 18,
                  formatter: function(v) {
                    return data;
                  },
                  align: 'center',

                }
              }]
            };

            myChart.setOption(option, true);
          },
          chart4(data){
            var dom = document.getElementById("echarts4");
            var myChart = echarts.init(dom);
            var option = {
              series: [{
                type: 'liquidFill',
                radius: 130,
                center: ['50%', '45%'],
                data: [0.7, 0.75],
                backgroundStyle: {
                  borderWidth: 4,
                  borderColor: '#f0f0f0',
                  color: '#fff'
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 1,
                  color: 'rgba(81, 93, 195, 0.7)'
                }, {
                  offset: 0,
                  color: 'rgba(113, 124, 221, 0.3)'
                }]),
                itemStyle: {
                  shadowBlur: 0,
	                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
		                offset: 1,
		                color: 'rgba(172, 220, 238, 0.7)'
	                }, {
		                offset: 0,
		                color: 'rgba(172, 220, 238, 0.7)'
	                }]),
                  opacity: 1,
                },
                outline: {
                  show: false
                },
                label: {
                  fontSize: 18,
                  formatter: function(v) {
                    return data;
                  },
                  align: 'center',

                }
              }]
            };

            myChart.setOption(option, true);
          },
          chart5(data){
            var dom = document.getElementById("echarts5");
            var myChart = echarts.init(dom);
            var option = {
	            color:['#d3e2a9','#e9e3cf','#f8cdc6','#acdcee','#fdd18e','#bba972','#fae1cb','#afcb64','#ffaaaa'],
              tooltip: {
                trigger: 'item',
                formatter:'类别：{b} <br/>人数：{c}<br/>占比：{d}%'
              },
              legend: {
                orient: 'vertical',
                left: "10",
                itemGap:5,
                data: ['20-25', '26-30', '31-35', '36-40', '41-45', '46-50', '51-55', '56-60','60以上'],
                textStyle:{
                  fontSize:10,
                  lineHeight:10,
                }
              },
              series: [
                {
                  type: 'pie',
                  radius: [20, 50],
                  center: ['60%', '40%'],
                  roseType: 'area',
                  label:{
                    fontSize:10
                  },
                  labelLine:{
                    length:5,
                    length:7,
                  },
                  data: data
                }
              ]
            };

            myChart.setOption(option, true);
            var that = this;
            myChart.on('click', 'series', function (params) {
              var url ='/mvc/statistical/personAgeStatistical' ;
              var name = params.data.name;
              that.showDetails(url,'leader','',name);
            });

          },
          chart6(data){
            var dom = document.getElementById("echarts6");
            var myChart = echarts.init(dom);
            var option = {
	            color:['#d3e2a9','#e9e3cf','#f8cdc6','#acdcee','#fdd18e'],
              tooltip: {
                trigger: 'item',
                formatter: '类别：{b} <br/>人数：{c}<br/>占比：{d}%'
              },
              legend: {
                orient: 'vertical',
                left: "10",
                itemGap:5,
                data: ['0-5','6-10','11-15','16-20','21及以上'],
                textStyle:{
                  fontSize:10,
                  lineHeight:10,
                }
              },
              series: [
                {
                  type: 'pie',
                  radius: [20, 50],
                  center: ['60%', '40%'],
                  roseType: 'area',
                  label:{
                    fontSize:10
                  },
                  labelLine:{
                    length:5,
                    length:7,
                  },
                  data: data
                }
              ]
            };

            myChart.setOption(option, true);
            var that = this;
            myChart.on('click', 'series', function (params) {
              var url ='/mvc/statistical/personWorkAgeStatistical' ;
              var name = params.data.name;
              that.showDetails(url,'leader','',name);
            });
          },
          chart7(data){
            var dom = document.getElementById("echarts7");
            var myChart = echarts.init(dom);
            var option = {
	            color:['#d3e2a9','#e9e3cf','#f8cdc6','#acdcee','#fdd18e'],
              tooltip: {
                trigger: 'item',
                formatter: '类别：{b} <br/>人数：{c}<br/>占比：{d}%'
              },
              legend: {
                orient: 'vertical',
                left: "10",
                itemGap:5,
                data: ['0-5','6-10','11-15','16-20','21及以上'],
                textStyle:{
                  fontSize:10,
                  lineHeight:10,
                }
              },
              series: [
                {
                  type: 'pie',
                  radius: [20, 50],
                  center: ['60%', '40%'],
                  roseType: 'area',
                  label:{
                    fontSize:10
                  },
                  labelLine:{
                    length:5,
                    length:7,
                  },
                  data: data
                }
              ]
            };

            myChart.setOption(option, true);
            var that = this;
            myChart.on('click', 'series', function (params) {
              var url ='/mvc/statistical/personCompanyAgeStatistical' ;
              var name = params.data.name;
              that.showDetails(url,'leader','',name);
            });
          },
          chart8(data){
            var dom = document.getElementById("echarts8");
            var myChart = echarts.init(dom);
            var option = {
	            color:['#d3e2a9','#e9e3cf','#f8cdc6','#acdcee','#fdd18e'],
              tooltip: {
                trigger: 'item',
                formatter: '类别：{b} <br/>人数：{c}<br/>占比：{d}%'
              },
              legend: {
                orient: 'vertical',
                left: '10',
                data: ['博士研究生及以上', '硕士研究生', '大学本科', '大专', '高中及以下'],
                itemGap:5,
                textStyle:{
                  fontSize:10,
                  lineHeight:10,
                }
              },
              series: [
                {
                  name: '学历',
                  type: 'pie',
                  radius: '75%',
                  center: ['60%', '50%'],
                  label:{
                    show:false,
                    fontSize:10
                  },
                  labelLine:{
                    show:false,
                    length:5,
                    length:7,
                  },
                  data: data,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };


            myChart.setOption(option, true);
            var that = this;
            myChart.on('click', 'series', function (params) {
              var url ='/mvc/statistical/personEducationStatistical' ;
              var name = params.data.name;
              that.showDetails(url,'leader','',name);
            });
          },
          chart9(data){
            var dom = document.getElementById("echarts9");
            var myChart = echarts.init(dom);
            var option = {
	            color:['#d3e2a9','#e9e3cf','#f8cdc6','#acdcee'],
              tooltip: {
                trigger: 'item',
                formatter: '类别：{b} <br/>人数：{c}<br/>占比：{d}%'
              },
              legend: {
                data:  ['劳动合同用工', '劳务协议用工', '返聘协议用工', '其它'],
                orient: 'vertical',
                left: '10',
                itemGap:5,
                textStyle:{
                  fontSize:10,
                  lineHeight:10,
                }
              },
              series: [
                {
                  name: '员工类别',
                  type: 'pie',
	              radius: ['55%', '70%'],
                  center: ['60%', '45%'],
                  label:{
                    show:false,
                    fontSize:10
                  },
                  labelLine:{
                    show:false,
                    length:7,
                  },
                  data: data,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };


            myChart.setOption(option, true);
            var that = this;
            myChart.on('click', 'series', function (params) {
              var url ='/mvc/statistical/personTypeStatistical' ;
              var name = params.data.name;
              that.showDetails(url,'leader','',name);
            });
          },
          chart10(data){
            var dom = document.getElementById("echarts10");
            var myChart = echarts.init(dom);
            var dashedPic = '';
            var color = ['#d3e2a9','#e9e3cf','#f8cdc6','#acdcee'];
            var chartData = data;
            var arrName = [];
            var arrValue = [];
            var sum = 0;
            var pieSeries = [],
              lineYAxis = [];

// 数据处理
            chartData.forEach(function(v, i) {
              arrName.push(v.name);
              arrValue.push(v.value);
              sum = sum + v.value;
            })

// 图表option整理
            chartData.forEach(function(v, i) {
              pieSeries.push({
                name: '政治面貌',
                type: 'pie',
                clockWise: false,
                hoverAnimation: false,
                radius: [75 - i * 15 + '%', 67 - i * 15 + '%'],
                center: ["50%", "50%"],
                label: {
                  show: false
                },
                data: [{
                  value: v.value,
                  name: v.name
                }, {
                  value: sum - v.value,
                  name: '',
                  itemStyle: {
                    color: "rgba(0,0,0,0)"
                  }
                }]
              });
              pieSeries.push({
                name: '',
                type: 'pie',
                // silent: true,
                z: 1,
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [75 - i * 15 + '%',67 - i * 15 + '%'],
                center: ["50%", "50%"],
                label: {
                  show: false
                },
                data: [{
                  value: 7.5,
                  itemStyle: {
                    color: "#E3F0FF"
                  }
                }, {
                  value: 2.5,
                  name: '',
                  itemStyle: {
                    color: "rgba(0,0,0,0)"
                  }
                }]
              });
              v.percent = (v.value / sum * 100).toFixed(1) + "%";
              lineYAxis.push({
                value: i,
                textStyle: {
                  rich: {
                    circle: {
                      color: color[i],
                      padding: [0, 5]
                    }
                  }
                }
              });
            })

            var option = {
              backgroundColor: '#fff',
              color: color,
              tooltip: {
                trigger: 'item',
                formatter:'类别：{b} <br/>人数：{c}<br/>占比：{d}%'
              },
              grid: {
                top: '11%',
                bottom: '59%',
                left: "50%",
                containLabel: false
              },
              yAxis: [{
                type: 'category',
                inverse: true,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  formatter: function(params) {
                    var item = chartData[params];
                    return '{line|}{circle|●}{name|'+ item.name +'}'
                  },
                  interval: 0,
                  inside: true,
                  textStyle: {
                    color: "#333",
                    fontSize: 10,
                    rich: {
                      line: {
                        width: 40,
                        height: 10,
                        backgroundColor: {image: dashedPic}
                      },
                      name: {
                        color: '#666',
                        fontSize: 10,
                      },
                      bd: {
                        color: '#ccc',
                        padding: [0, 5],
                        fontSize: 10,
                      },
                      percent:{
                        color: '#333',
                        fontSize: 10,
                      },
                      value: {
                        color: '#333',
                        fontSize: 10,
                        padding: [0, 0, 0, 20]
                      },
                      unit: {
                        fontSize: 14
                      }
                    }
                  },
                  show: true
                },
                data: lineYAxis
              }],
              xAxis: [{
                show: false
              }],
              series: pieSeries
            };


            myChart.setOption(option, true);
            var that = this;
            myChart.on('click', 'series', function (params) {
              var url ='/mvc/statistical/personPartyFigureStatistical' ;
              var name = params.data.name;
              that.showDetails(url,'leader','',name);
            });
          },
          chart11(data){
            var dom = document.getElementById("echarts11");
            var myChart = echarts.init(dom);
            var dashedPic = '';
            var color = ['#d3e2a9','#e9e3cf','#f8cdc6','#acdcee','#fdd18e'];
            var chartData = data;
            var arrName = [];
            var arrValue = [];
            var sum = 0;
            var pieSeries = [],
              lineYAxis = [];

// 数据处理
            chartData.forEach(function(v, i) {
              arrName.push(v.name);
              arrValue.push(v.value);
              sum = sum + v.value;
            })

// 图表option整理
            chartData.forEach(function(v, i) {
              pieSeries.push({
                name: '职称',
                type: 'pie',
                clockWise: false,
                hoverAnimation: false,
                radius: [75 - i * 15 + '%', 67 - i * 15 + '%'],
                center: ["50%", "50%"],
                label: {
                  show: false
                },
                data: [{
                  value: v.value,
                  name: v.name
                }, {
                  value: sum - v.value,
                  name: '',
                  itemStyle: {
                    color: "rgba(0,0,0,0)"
                  }
                }]
              });
              pieSeries.push({
                name: '',
                type: 'pie',
                silent: true,
                z: 1,
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [75 - i * 15 + '%',67 - i * 15 + '%'],
                center: ["50%", "50%"],
                label: {
                  show: false
                },
                data: [{
                  value: 7.5,
                  itemStyle: {
                    color: "#E3F0FF"
                  }
                }, {
                  value: 2.5,
                  name: '',
                  itemStyle: {
                    color: "rgba(0,0,0,0)"
                  }
                }]
              });
              v.percent = (v.value / sum * 100).toFixed(1) + "%";
              lineYAxis.push({
                value: i,
                textStyle: {
                  rich: {
                    circle: {
                      color: color[i],
                      padding: [0, 5]
                    }
                  }
                }
              });
            })

            var option = {
              backgroundColor: '#fff',
              color: color,
              tooltip: {
                trigger: 'item',
                formatter:'类别：{b} <br/>人数：{c}<br/>占比：{d}%'
              },
              grid: {
                top: '11%',
                bottom: '52%',
                left: "50%",
                containLabel: false
              },
              yAxis: [{
                type: 'category',
                inverse: true,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  formatter: function(params) {
                    var item = chartData[params];
                    return '{line|}{circle|●}{name|'+ item.name +'}'
                  },
                  interval: 0,
                  inside: true,
                  textStyle: {
                    color: "#333",
                    fontSize: 10,
                    rich: {
                      line: {
                        width: 40,
                        height: 10,
                        backgroundColor: {image: dashedPic}
                      },
                      name: {
                        color: '#666',
                        fontSize: 10,
                      },
                      bd: {
                        color: '#ccc',
                        padding: [0, 5],
                        fontSize: 10,
                      },
                      percent:{
                        color: '#333',
                        fontSize: 10,
                      },
                      value: {
                        color: '#333',
                        fontSize: 10,
                        padding: [0, 0, 0, 20]
                      },
                      unit: {
                        fontSize: 14
                      }
                    }
                  },
                  show: true
                },
                data: lineYAxis
              }],
              xAxis: [{
                show: false
              }],
              series: pieSeries
            };


            myChart.setOption(option, true);
            var that = this;
            myChart.on('click', 'series', function (params) {
              var url ='/mvc/statistical/personTechnicalTitleGradeStatistical' ;
              var name = params.data.name;
              that.showDetails(url,'leader','',name);
            });
          },
          chart12(data){
            var dom = document.getElementById("echarts12");
            var myChart = echarts.init(dom);
            var dashedPic = '';
            var color = ['#d3e2a9','#e9e3cf','#f8cdc6','#acdcee','#fdd18e'];
            var chartData = data;
            var arrName = [];
            var arrValue = [];
            var sum = 0;
            var pieSeries = [],
              lineYAxis = [];

// 数据处理
            chartData.forEach(function(v, i) {
              arrName.push(v.name);
              arrValue.push(v.value);
              sum = sum + v.value;
            })

// 图表option整理
            chartData.forEach(function(v, i) {
              pieSeries.push({
                name: '职务层级统计',
                type: 'pie',
                clockWise: false,
                hoverAnimation: false,
                radius: [75 - i * 15 + '%', 67 - i * 15 + '%'],
                center: ["50%", "50%"],
                label: {
                  show: false
                },
                data: [{
                  value: v.value,
                  name: v.name
                }, {
                  value: sum - v.value,
                  name: '',
                  itemStyle: {
                    color: "rgba(0,0,0,0)"
                  }
                }]
              });
              pieSeries.push({
                name: '',
                type: 'pie',
                silent: true,
                z: 1,
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [75 - i * 15 + '%',67 - i * 15 + '%'],
                center: ["50%", "50%"],
                label: {
                  show: false
                },
                data: [{
                  value: 7.5,
                  itemStyle: {
                    color: "#E3F0FF"
                  }
                }, {
                  value: 2.5,
                  name: '',
                  itemStyle: {
                    color: "rgba(0,0,0,0)"
                  }
                }]
              });
              v.percent = (v.value / sum * 100).toFixed(1) + "%";
              lineYAxis.push({
                value: i,
                textStyle: {
                  rich: {
                    circle: {
                      color: color[i],
                      padding: [0, 5]
                    }
                  }
                }
              });
            })

            var option = {
              backgroundColor: '#fff',
              color: color,
              tooltip: {
                trigger: 'item',
                formatter:'类别：{b} <br/>人数：{c}<br/>占比：{d}%'
              },
              grid: {
                top: '11%',
                bottom: '59%',
                left: "50%",
                containLabel: false
              },
              yAxis: [{
                type: 'category',
                inverse: true,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  formatter: function(params) {
                    var item = chartData[params];
                    return '{line|}{circle|●}{name|'+ item.name +'}'
                  },
                  interval: 0,
                  inside: true,
                  textStyle: {
                    color: "#333",
                    fontSize: 10,
                    rich: {
                      line: {
                        width: 40,
                        height: 10,
                        backgroundColor: {image: dashedPic}
                      },
                      name: {
                        color: '#666',
                        fontSize: 10,
                      },
                      bd: {
                        color: '#ccc',
                        padding: [0, 5],
                        fontSize: 10,
                      },
                      percent:{
                        color: '#333',
                        fontSize: 10,
                      },
                      value: {
                        color: '#333',
                        fontSize: 10,
                        padding: [0, 0, 0, 20]
                      },
                      unit: {
                        fontSize: 14
                      }
                    }
                  },
                  show: true
                },
                data: lineYAxis
              }],
              xAxis: [{
                show: false
              }],
              series: pieSeries
            };


            myChart.setOption(option, true);
            var that = this;
            myChart.on('click', 'series', function (params) {
              var url ='/mvc/statistical/personJobLevelStatistical';
              var name = params.data.name;
              that.showDetails(url,'leader','',name);
            });
          },
          chart13(data1,data2,data3){
            var dom = document.getElementById("echarts13");
            var myChart = echarts.init(dom);
            var xAxisData = [];

            var option = {
	            color:['#d3e2a9','#e9e3cf'],
              legend: {
                orient: 'horizontal',
                left: "center",
                top:0,
                itemGap:5,
                textStyle:{
                  fontSize:10,
                  lineHeight:10,
                },
                data: ['入职', '离职'],
              },
              tooltip: {
                trigger: 'item',
                formatter:function(params){
                  return '类别：'+params.seriesName +'<br/>人数：'+Math.abs(params.data)
                }
              },
              xAxis: {
                data: data3,
                axisLine: {onZero: true},
                splitLine: {show: false},
                axisLabel:{interval:0,rotate:'45'},
                splitArea: {
                  show: false,
                  interval:0
                }
              },
              yAxis: {
                splitArea: {show: false},
                axisLabel: {
                  formatter: function(v){
                    if(v >= 0){
                      return  v;
                    }else{
                      return  -1*v;
                    }
                  }
                }
              },
              grid: {
                left: 20,
                right:5,
                top:40,
                bottom:50
              },
              series: [
                {
                  name: '入职',
                  type: 'bar',
                  stack: 'one',
                  barWidth : 10,
                  data: data1
                },
                {
                  name: '离职',
                  type: 'bar',
                  stack: 'one',
                  barWidth : 10,
                  data: data2
                }
              ]
            };

            myChart.setOption(option, true);
            var that = this;
            myChart.on('click', 'series', function (params) {
              var name = params.seriesName;
              var month = params.name;
              if(name == "入职"){
                var isEntry = "00901";
              }else{
                var isEntry = "00900";
              }

              var url ='/mvc/statistical/queryPersonChanges' ;
              that.showDetails(url,'leader','',name,month,isEntry);
            });
          }


        }
    }

</script>

<style lang="scss" scoped>
  @import '../../assets/style/mixin';
  @import '../../assets/style/public';
  .newsItem{
    padding-top: 0.5rem;
    .itemDate{
      display: flex;
      justify-content: center;
      font-size:0.6rem;
      color: #cccccc;
      height: 1.6rem;
      line-height:1.6rem;
    }
    .itemContent{
      margin: 0 0.5rem;
      background-color: #fff;
      padding: 0 0.4rem;
      border-top-left-radius: 0.2rem;
      border-top-right-radius: 0.2rem;
      position: relative;
      z-index: 99;
      .itemConHead{
        display: flex;
        align-items: center;
        font-size: 0.6rem;
        color: #333333;
        line-height: 0.8rem;
        padding:0.6rem 0;
        border-bottom: 1px solid #eee;
      }
      .itemLists{
        padding: 0.08rem;
        .itemList{
          display: flex;
          padding: 0.32rem 0;
          align-items: center;
          justify-content: flex-end;
          .itemName{
            color: #000;
            font-size: 0.56rem;
            flex: 1;
            word-break: keep-all;
          }
          .itemType{
            margin-left: 0.4rem;
            color: #666666;
            font-size:0.56rem;
            /*width:8rem;*/
            white-space: normal;
            word-break: break-all;
            font{
              font-size: 0.7rem;
            }
          }
        }
      }
    }
    .itemNav{
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #1f9eff;
      font-size:0.6rem;
      height: 1.2rem;
      line-height:1.2rem;
      margin: 0 0.5rem;
      padding: 0.4rem;
      background-color: #fff;
      border-bottom-left-radius: 0.2rem;
      border-bottom-right-radius:0.2rem;
      overflow: hidden;
      .arrow{
        display: flex;
        align-items: center;
        img{
          width: 0.56rem;
          height: 0.56rem;
          vertical-align: top;

        }
      }
    }
  }
  .chartData-pink {
    color: #FB7293;
  }
  .chartData-zi1 {
    color: #8836C6;
  }
  .chartData-zi {
    color: #8378EA;
  }
</style>
